﻿
<style>
    .photoArea { width: 150px; margin: 0 auto; font-size: x-small; color: #ccc; border: 1px dotted #ccc; }
    #flash { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background-color: #c00; display: none; opacity: 1; }
</style>

<div class="modal-header">
    <button type="button" class="close" ng-disabled="loadingState" ng-click="close();"><span aria-hidden="true">&times;</span></button>
    <h3 class="modal-title">
        <i class="fa fa-camera-retro"></i>
        拍照
    </h3>
</div>

<div class="modal-body">
    <h4>
        <small>
            如出现黑屏不能拍照情况，请依次检查：
            <br />
            1，首先确保摄像头不是坏的。2，确保驱动正常。3，确保摄像头的开关是打开状态。
        </small>
    </h4>

    <div class="well text-center">
        <p class="photoArea">照片采集区范围</p>
        <p id="camera" style="margin:0;"></p>
        <!--<canvas id="myCanvas"></canvas>-->
        <p class="photoArea">照片采集区范围</p>
    </div>
</div>

<div class="modal-footer">
    <button class="btn btn-turquoise" ng-click="shoot();" ng-disabled="loadingState">
        <i class="fa fa-spinner fa-spin" ng-show="loadingState"></i>
        <i class="fa fa-camera" ng-hide="loadingState"></i>
        拍照
    </button>

    <button class="btn btn-gray" ng-click="close();" ng-disabled="loadingState">
        <i class="fa fa-close"></i>
        关闭
    </button>
</div>

<div id="flash"></div>
<audio id="shutter" src="/App/vendor/webcam/music.mp3"></audio>